import React, {useState,} from 'react'
import {WhiteSpace, WingBlank} from "antd-mobile";
import CustomButton from "../../../../../../shared-components/CustomButton/CustomBotton";
import RecordTable from "../companents/RecordTable/RecordTable";

const Record = props => {

    const [sameHomeAway, setSameHomeAway] = useState(false)
    const [sameEvent, setSameEvent] = useState(false)
    const {
        homeRecord,
        awayRecord,
        teams,
        events,
        currentGame,
    } = props

    const sameHomeAwayBtn = (
        <CustomButton
            inline='true'
            bg={!sameHomeAway ? 'rgba(51,51,51, 0.1)' : ''}
            size='xs'
            color={!sameHomeAway ? '#333' : ''}
            onClick={() => setSameHomeAway(!sameHomeAway)}
            extrastyle={{
                marginRight: '6px',
            }}
        >同主客</CustomButton>
    )
    const sameEventBtn = (
        <CustomButton
            inline='true'
            bg={!sameEvent ? 'rgba(51,51,51, 0.1)' : ''}
            size='xs'
            color={!sameEvent ? '#333' : ''}
            onClick={() => setSameEvent(!sameEvent)}
        >同赛事</CustomButton>
    )

    const performanceTitle = (
        <WingBlank>
            <div className='flex-space-between-align-center'>
                <div className='game-room-analysis-title'>近期战绩</div>
                <div>
                    {sameHomeAwayBtn}
                    {sameEventBtn}
                </div>
            </div>
        </WingBlank>
    )


    return <>
        <WhiteSpace/>
        {performanceTitle}
        <WhiteSpace/>
        <RecordTable
            type='home'
            icon={true}
            recordList={homeRecord}
            sameHomeAway={sameHomeAway}
            sameEvent={sameEvent}
            teams={teams}
            events={events}
            team={currentGame.home_team}
            currentGame={currentGame}
        />
        <WhiteSpace/>
        <RecordTable
            type='away'
            icon={true}
            recordList={awayRecord}
            sameHomeAway={sameHomeAway}
            sameEvent={sameEvent}
            teams={teams}
            events={events}
            team={currentGame.away_team}
            currentGame={currentGame}
        />
        <WhiteSpace/>
    </>

}


export default Record
